<template>
  <view>
    <view class="search-box" @click="gotoserch()">
      <!-- 使用 uni-ui 提供的搜索组件 -->
      <uni-search-bar :radius="100" cancelButton="none" @click="gotoserch()" focus="none"></uni-search-bar>
    </view>
    <view class="scoll_container">
      <scroll-view scroll-y="true" class="left_scoll" :style="{height:widowsH + 'px'}">
        <block>
          <view :class="['left_item',index==active_index?'active':' ']" v-for="(item,index) in tag_list" :key="index"
            @click="changeActive(index)">{{item[1]}}
          </view>
        </block>
      </scroll-view>
      <scroll-view scroll-y="true" class="right_scoll" :style="{height:widowsH + 'px'}" :scroll-top="scollTop">
        <!-- 有三级列表的情况 -->
        <!-- <view class="cate_lv2" v-for="(item2,i2) in left_level2" :key="i2">
          <view class="title">
            /{{item2.cat_name}}/
          </view> -->
        <view class="cate_lv2">
          <view class="title">
            /{{tag_name}}/
          </view>
          <view class="lv3_container">
            <view class="lv3_item" v-for="(item3,i3) in left_level2" :key="i3" @click="goGoodsList(item3.id)">
              <image :src="item3.avatar" mode=""></image>
              <text>{{item3.nickname}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        widowsH: 0,
        cateList: [],
        active_index: 0,
        left_level2: [],
        scollTop: 0,
        tag_list: [],
        tag_name: "",
        users: []
      };
    },
    onLoad() {
      const syncinfo = uni.getSystemInfoSync()
      this.widowsH = syncinfo.windowHeight - 50
      // this.getLeftList()
      // this.left_level2 = this.cateList[0].children
      this.getLeftList()
    },
    methods: {
      async getLeftList() {
        const {
          data: res
        } = await uni.$http.get('/users/all-users')
        if (res.code != 1000) return uni.$showMsg()
        console.log(res.data);
        this.users = res.data.users
        this.tag_list = res.data.tag_list.slice(1)
        this.changeActive(0)
      },
      changeActive(index) {
        this.active_index = index
        var temp = []
        for (var i = 0; i < this.users.length; i++) {
          if (this.users[i].tag_type == this.tag_list[index][0]) {
            temp.push(this.users[i])
          }
        }
        this.tag_name = this.tag_list[index][1]
        this.left_level2 = temp
        console.log(this.left_level2);
        this.scollTop = this.scollTop ? 0 : 1
      },
      goGoodsList(id) {
        uni.navigateTo({
          url: '/subpkg/personPage/personPage?id=' + id
        })
      },
      gotoserch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
  .uni-searchbar {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    position: relative;
    padding: 16rpx;
    /* 将默认的 #FFFFFF 改为 #C00000 */
    background-color: #1684FC;
  }

  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .scoll_container {
    display: flex;

    .left_scoll {
      width: 120px;

      .left_item {
        line-height: 60px;
        background-color: #f7f7f7;
        text-align: center;
        font-size: 14px;

        &.active {
          background-color: #ffffff;
          position: relative;

          &::before {
            content: ' ';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #1684FC;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }

    .right_scoll {
      .title {
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        padding: 15px 0;
      }

      .lv3_container {
        display: flex;
        flex-wrap: wrap;

        .lv3_item {
          width: 33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 10px;

          image {
            width: 80px;
            height: 80px;
          }

          text {
            width: 70%;
            font-size: 13px;
            margin-top: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
          }
        }
      }
    }
  }
</style>
